<template>
    <div class="ranking-container">
      <!-- 宇宙背景 -->
      <div class="cosmic-bg">
        <div class="star-layer"></div>
        <div class="energy-flow"></div>
      </div>
  
      <!-- 主排行榜 -->
      <div class="ranking-main">
        <h1 class="ranking-title">
          <span class="title-glow">虚空排行榜</span>
        </h1>
  
        <div class="ranking-list">
          <!-- 前三名特殊样式 -->
          <div class="rank-item top3 gold">
            <div class="rank-halo"></div>
            <span class="rank-order">#1</span>
            <span class="rank-name">Nuyoah</span>
            <span class="rank-score">1730</span>
          </div>
  
          <div class="rank-item top3 silver">
            <div class="rank-halo"></div>
            <span class="rank-order">#2</span>
            <span class="rank-name">暗物质猎人</span>
            <span class="rank-score">1530</span>
          </div>
  
          <div class="rank-item top3 bronze">
            <div class="rank-halo"></div>
            <span class="rank-order">#3</span>
            <span class="rank-name">量子幽灵</span>
            <span class="rank-score">1420</span>
          </div>
  
          <!-- 常规排名 -->
          <div class="rank-item">
            <span class="rank-order">#4</span>
            <span class="rank-name">星云旅者</span>
            <span class="rank-score">1290</span>
          </div>
  
          <div class="rank-item">
            <span class="rank-order">#5</span>
            <span class="rank-name">黑洞作曲家</span>
            <span class="rank-score">1270</span>
          </div>
        </div>
        <button type="button" @click="toweb"  class="login-btn">退出</button>
      </div>
      
    </div>
    
  </template>
  
  <script setup lang="ts">
    import router from '@/router';
  function toweb(){
      router.push({ name: 'Topic' });
      setTimeout(() => {
        window.location.reload();
      }, 1000);
    }
  </script>

  <style>
  /* 基础样式 */
  .ranking-container {
    min-height: 100vh;
    background: #0a0e1a;
    position: relative;
    overflow: hidden;
  }
  
  /* 宇宙背景 */
  .cosmic-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: 
      radial-gradient(circle at 20% 30%, rgba(87,160,255,0.05), transparent 60%),
      radial-gradient(circle at 80% 70%, rgba(255,71,160,0.05), transparent 60%);
  }
  
  .star-layer {
    position: absolute;
    width: 300%;
    height: 300%;
    background: 
      radial-gradient(2px 2px at 20% 30%, #57a0ff, transparent),
      radial-gradient(2px 2px at 80% 70%, #ff47a0, transparent);
    animation: star-drift 200s linear infinite;
    opacity: 0.3;
  }
  
  .energy-flow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      45deg,
      rgba(87,160,255,0.05),
      rgba(255,71,160,0.05)
    );
    filter: blur(40px);
  }
  
  @keyframes star-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-50%, -50%); }
  }
  
  /* 主内容区 */
  .ranking-main {
    position: relative;
    width: 800px;
    margin: 100px auto;
    padding: 40px;
    background: rgba(16, 22, 36, 0.95);
    border-radius: 20px;
    border: 1px solid rgba(87,160,255,0.3);
    box-shadow: 0 0 50px rgba(87,160,255,0.1);
    backdrop-filter: blur(15px);
  }
  
  .ranking-title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
  }
  
  .title-glow {
    color: #57a0ff;
    font-size: 2.5em;
    text-shadow: 0 0 20px rgba(87,160,255,0.5);
    position: relative;
    z-index: 1;
  }
  
  /* 排名项样式 */
  .ranking-list {
    display: grid;
    gap: 15px;
  }
  
  .rank-item {
    position: relative;
    padding: 20px 30px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
  }
  
  .rank-item:hover {
    transform: translateX(15px);
    background: linear-gradient(
      90deg,
      rgba(87,160,255,0.1),
      rgba(16,22,36,0.7)
    );
  }
  
  /* 前三名特效 */
  .top3 {
    border-left: 4px solid transparent;
  }
  
  .gold {
    border-color: #ffd700;
    background: linear-gradient(
      to right,
      rgba(255,215,0,0.1),
      rgba(16,22,36,0.7)
    );
  }
  
  .silver {
    border-color: #c0c0c0;
    background: linear-gradient(
      to right,
      rgba(192,192,192,0.1),
      rgba(16,22,36,0.7)
    );
  }
  
  .bronze {
    border-color: #cd7f32;
    background: linear-gradient(
      to right,
      rgba(205,127,50,0.1),
      rgba(16,22,36,0.7)
    );
  }
  
  .rank-halo {
    position: absolute;
    left: -10px;
    height: 100%;
    width: 3px;
    background: linear-gradient(
      to bottom,
      transparent,
      #57a0ff,
      transparent
    );
    opacity: 0.6;
  }
  
  /* 文字样式 */
  .rank-order {
    width: 60px;
    color: #57a0ff;
    font-size: 1.2em;
    font-weight: bold;
  }
  
  .rank-name {
    flex: 1;
    color: rgba(255,255,255,0.9);
    font-size: 1.1em;
  }
  
  .rank-score {
    color: #ff47a0;
    font-weight: bold;
    font-size: 1.1em;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .ranking-main {
      width: 90%;
      margin: 50px auto;
      padding: 20px;
    }
    
    .rank-item {
      padding: 15px 20px;
    }
  }

  .login-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #57a0ff, #ff47a0);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  
  .login-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(87, 154, 255, 0.5);
  }

  </style>